<template>
    <div class="page-account">
        <div class="page-account-container">
            <div class="page-account-top">
                <!-- <div class="page-account-top-logo">
                    <img src="@/assets/images/logo.png" alt="logo" />
                </div> -->
                <div class="page-account-top-desc"><h2>网站管理系统</h2></div>
            </div>
            <Login @on-submit="handleSubmit">
                <Mobile name="username" :rules="usernameRule" :value="username" />
                <Password name="password" :value="password" enter-to-submit />
                <div class="page-account-auto-login">
                    <Checkbox v-model="autoLogin" size="large">{{
                        $t("page.login.remembers")
                        }}</Checkbox>
                </div>
                <Submit :loading="submitloading" class="submitLogin">{{
                    $t("page.login.submit")
                    }}</Submit>
            </Login>
        </div>
    </div>
</template>
<script>
    import { mapActions, mapGetters } from 'vuex';
    import mixins from '../mixins';
    import util from '@/libs/util';
    export default {
        mixins: [mixins],
        data () {
            return {
                submitloading: false,
                autoLogin: true,
                luck: true,
                username: '',
                password: '',
                project: [],
                usernameRule: [{ required: true, message: '请输入11位手机号', pattern: /^1[3456789]\d{9}$/, trigger: 'blur' }]
            };
        },
        mounted () {
            // 京港平台带参登录
            if (this.getQueryVariable('userid')) {
                this.submitloading = true
                this.logins({ user_id: this.getQueryVariable('userid') })
                    .then((res) => {
                        util.storage.set('is_super', res.info.is_super);
                        let currentProject = util.storage.get('webcurrProject')
                        this.getmenu(currentProject).then(() => {
                            // this.closeAll();
                            this.submitloading = false
                            const menus = util.storage.get('menus')
                            const path = menus.header[0].path
                            // 重定向对象不存在则返回顶层路径
                            // this.$router.replace(this.$route.query.redirect || path);
                            // 重定向对象不存在则返回顶层路径
                            // this.$router.replace(this.$route.query.redirect || '/');
                            this.$router.replace(path);
                        });
                        // this.$router.replace(this.$route.query.redirect || '/');
                    })
                    .catch(() => {
                        this.submitloading = false
                        this.luck = true;
                    })
                    .finally(() => {
                        window.setTimeout(() => {
                            this.submitloading = false
                            this.luck = true;
                        }, 2000);
                });
            }
        },
        beforeMount () {
            // if (util.storage.get('loginInfo')) {
            //     let obj = util.storage.get('loginInfo');
            //     this.username = obj.username;
            //     this.password = obj.password;
            // }
            if(util.cookies.get('username')&&util.cookies.get('password')){
                let username = util.cookies.get('username');
                this.username = username;
                let password= util.cookies.get('password');
                // let enc = window.btoa(password) //编码成base64的
                let dec = window.atob(password) //把base64解码
                this.password = dec;
             }
            if (util.storage.get('autoLogin')) {
                let obj = util.storage.get('autoLogin');
                this.autoLogin = obj
            }
            this.project = util.storage.get('project');
            util.storage.set('home', true);
        },
        methods: {
            ...mapActions('admin/page', ['closeAll']),
            ...mapActions('admin/account', [
                'login',
                'logins',
                'getmenu'
            ]),
            /**
             * @description 登录
             * 表单校验已有 iView Pro 自动完成，如有需要修改，请阅读 iView Pro 文档
             */
            handleSubmit (valid, values) {
                if (valid) {
                    const { username, password } = values;
                    if (this.luck) {
                        this.luck = false;
                        this.submitloading = true
                        this.login({
                            username,
                            password
                        })
                            .then((res) => {
                                util.storage.set('is_super', res.info.is_super);
                                if (this.autoLogin) {
                                    // let userLogin = {
                                    //     username: values.username,
                                    //     password: values.password
                                    // };
                                    let enc = window.btoa(password) 
                                    util.cookies.set('username', username);
                                    util.cookies.set('password', enc);
                                    // util.storage.set('loginInfo', userLogin);
                                } else {
                                    if (util.cookies.get('username')&&util.cookies.get('password')) {
                                        util.cookies.remove('username');
                                        util.cookies.remove('password');
                                    }
                                }
                                util.storage.set('autoLogin', this.autoLogin);
                                let currentProject = util.storage.get('webcurrProject')
                                // console.log(1111, currentProject)
                                this.getmenu(currentProject).then(() => {
                                    // this.closeAll();
                                    this.submitloading = false
                                    const menus = util.storage.get('menus')
                                    const path = menus.header[0].path
                                    // 重定向对象不存在则返回顶层路径
                                    // this.$router.replace(this.$route.query.redirect || path);
                                    this.$router.replace(path);
                                }).catch(() => {
                                    this.submitloading = false
                                 });
                            })
                            .catch(() => {
                                this.submitloading = false
                                this.luck = true;
                            })
                            .finally(() => {
                                window.setTimeout(() => {
                                    this.luck = true;
                                }, 2000);
                        });
                    }
                }
            },
            getQueryVariable (variable) {
                let url = decodeURIComponent(window.location.href);
                let index = url.indexOf(variable);
                let query = url.substring(index);
                let vars = query.split('&');
                for (let i = 0; i < vars.length; i++) {
                    let pair = vars[i].split('=');
                    if (pair[0] == variable) {
                        return pair[1];
                    }
                }
                return false;
            }
        }
    };
</script>
<style lang="less" scoped>
    /deep/.ivu-input-prefix,
    .ivu-input-suffix {
        display: none;
    }

    .page-account-auto-login label {
        font-size: 16px !important;
    }

    /deep/.submitLogin button {
        color: #fff;
        // background-color: #30b862;
        // border-color: #30b862;
        height: 40px;
        padding: 0 15px;
        font-size: 16px;
        border-radius: 4px;
    }

    /deep/.submitLogin button span {
        font-size: 16px !important;
    }
</style>
